<template>
  <div id="teamCardList">
    <van-card
        v-for="team in props.teamList"
        :thumb="ikun"
        :desc="team.description"
        :title="`${team.name}`"
    >
      <!--        v-for="team in props.teamList"-->
      <!--        :desc="team.description"-->
      <!--        thumb="https://xingqiu-tuchuang-1256524210.cos.ap-shanghai.myqcloud.com/shayu931/shayu.png"-->
      <!--        :title="`${team.name} `"-->
      <template #tags>
        <van-tag plain type="danger" style="margin-right: 8px; margin-top: 8px" >
          {{
            teamStatusEnum[team.status]
          }}
        </van-tag>
      </template>
      <template #bottom>
        <div>
<!--          {{ `队伍人数: ${team.hasJoinNum}/${team.maxNum}` }}-->
          {{ `队伍人数: ${team.hasJoinNum}/${team.maxNum}` }}
        </div>
        <div v-if="team.expireTime">
          {{'过期时间' + team.expireTime}}
        </div>
        <div>
          {{'创建时间' + team.createTime}}
        </div>
      </template>
      <template #footer>
        <van-button  size="small" type="primary" v-if="team.userId !== currentUser?.id && !team.hasJoin"  plain
                    @click="preJoinTeam(team)">加入队伍
        </van-button>
        <van-button v-if="team.userId === currentUser?.id" size="small" plain
                    @click="doUpdateTeam(team.id)">更新队伍
        </van-button>
        <van-button v-if="team.userId!==currentUser?.id && team.hasJoin" size="small" plain
                    @click="doQuitTeam(team.id)">退出队伍
        </van-button>
        <van-button v-if="team.userId === currentUser?.id" size="small" palin type="danger"
                    @click="doDeleteTeam(team.id)">解散队伍
        </van-button>
      </template>
    </van-card>
  </div>
  <van-dialog v-model:show="showPasswordDialog" title="请输入密码" show-cancel-button @confirm="doJoinTeam"
              @cancel="doJoinCancel">
    <van-field v-model="password" placeholder="请输入密码"/>
  </van-dialog>
</template>

<script setup lang="ts">
import {TeamType} from "../models/team";
import {teamStatusEnum} from "../constants/team";
// import myAxios from "../plugins/myAxios.ts";
import myAxios from "../plugins/myAxios.ts";
import {Dialog, Toast} from "vant";
import ikun from '../assets/ikun.png';
import {useRouter} from "vue-router";
import {onMounted, ref} from "vue";
import {getCurrentUser} from "../services/user";

interface TeamCardListProps{
  teamList: TeamType[];
}
const props = withDefaults(defineProps<TeamCardListProps>(),{
  //@ts-ignore
  teamList: [] as TeamType[],
});

const showPasswordDialog = ref(false);
const password = ref('');
const joinTeamId = ref(0);
const currentUser = ref();

const VanDialog=Dialog.Component;
const router=useRouter();



onMounted(async ()=>{
  currentUser.value=await getCurrentUser();
})

// //队伍列表加入队伍
// const doJoinTeam = async(id: number): Promise<void> =>{
//   const res = await myAxios.post("/team/join",{
//     teamId : id
//   });
//   if (res?.code === 0){
//     Toast.success("加入成功")
//   }else {
//     Toast.fail("加入失败" + (res.description ? `， ${res.description} `:''));
//   }
// }

const preJoinTeam=(team: TeamType)=>{
  joinTeamId.value=team.id;
  if (team.status===0){
    doJoinTeam()
  } else {
    showPasswordDialog.value=true;
  }
}
const doJoinCancel=()=>{
  joinTeamId.value=0;
  password.value='';
}


interface ApiResponse {
  code: number;
  description?: string;
}

const doJoinTeam = async (): Promise<void> => {
  if (!joinTeamId.value){
    return;
  }
  const res: ApiResponse = await myAxios.post('/team/join', {
      teamId: joinTeamId.value,
      password: password.value
  });
  if (res?.code === 0) {
    Toast.success("加入成功");
    doJoinCancel();
  } else {
    Toast.fail("加入失败" + (res.description ? `， ${res.description} `:''));
  }
};

const doUpdateTeam=(id:number)=>{
  router.push({
    path: '/team/update',
    query:{
      id,
    }
  })
}
/**
 * 退出队伍
 * @param id
 * */
const doQuitTeam = async (id:number)=>{
  const res=await myAxios.post('/team/quit',{
    teamId: id
  });
  if (res?.code === 0){
    Toast.success("操作成功");
  }else{
    Toast.fail("退出失败" + (res.description ? `， ${res.description} `:''));
  }
}
/**
 * 删除队伍
 * */
const doDeleteTeam=async (id:number)=>{
  const res=await myAxios.post('/team/delete',{
    id,
  });
  if (res?.code === 0){
    Toast.success("操作成功");
  }else{
    Toast.fail("删除失败" + (res.description ? `， ${res.description} `:''));
  }
}
</script>

<style scoped>
#teamCardList :deep(.van-image__img){
  height: 128px;
  object-fit: unset;
}
</style>